<script setup>
import { reactive, ref, onMounted } from "vue";
import router from "@/router/index.js";
import config from "@/config/index.js";
import tools from "@/utils/tools.js";
import { Person20Regular as User, LockClosed20Regular as Lock, Bot20Regular as Bot } from '@vicons/fluent'
import { captcha, login } from "@/api/system.js";
import { system } from '@/mockjs/index.js'

// 校验规则
const rules = reactive({
  username: {
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: ['blur']
  },
  captcha: {
    required: true,
    message: '请输入验证码',
    trigger: ['blur']
  }
})

const loginForm = ref(null)
const captchaURL = ref('')
const loginFormData = ref({
  username: "admin",
  password: "Aa123456+",
  captcha: "",
  key: "",
  rememberMe: false
})

/**
 * 页面初始化
 */
onMounted(() => {
  refreshCatpcha()
})

/**
 * 刷新验证码
 * @returns {Promise<void>}
 */
const refreshCatpcha = async () => {
  loginFormData.value.key = new Date().getTime()
  const res = await captcha({
    key: loginFormData.value.key
  })
  // captchaURL.value = "data:image/png;base64," + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ""));
  captchaURL.value = res.data.captcha;
}

/**
 * 登录操作
 * @param e
 */
const handleLogin = (e) => {
  e.preventDefault();
  loginForm.value?.validate((errors) => {
    if (!errors) {
      const params = {
        username: tools.crypto.AES.encrypt(loginFormData.value.username),
        password: tools.crypto.AES.encrypt(loginFormData.value.password),
        captcha: loginFormData.value.captcha,
        key: loginFormData.value.key
      }
      // 调用登录接口
      login(params).then((res) => {
        tools.data.set(config.authentication.TOKEN_KEY, res.data.token) // 存储Token
        tools.data.set(config.system.MENU_KEY, system.menu) // 存储Menu
        window.$message.success('登录成功！')
        router.replace('/dashboard')
      })
    }
  })
}
</script>

<template>
<div class="login-container">
  <div class="login-advert">
    <h1>{{ config.APP_NAME }}</h1>
    <p>Dreamer Admin 是一个中后台前端解决方案，基于VUE3和Naive UI实现。使用最新的前端技术栈，持续性的提供丰富的业务模板帮助你快速搭建企业级中后台前端任务。</p>
  </div>
  <div class="login-form">
    <h1>欢迎登录</h1>
    <div class="login-form-box">
      <n-form ref="loginForm" :model="loginFormData" :rules="rules">
        <n-form-item label="用户名" path="username" label-style="color: #7f8693;">
          <n-input v-model:value="loginFormData.username" round placeholder="请输入用户名">
            <template #prefix>
              <n-icon :component="User" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item label="密码" path="password" label-style="color: #7f8693;">
          <n-input type="password" v-model:value="loginFormData.password" show-password-on="mousedown" round placeholder="请输入密码">
            <template #prefix>
              <n-icon :component="Lock" />
            </template>
          </n-input>
        </n-form-item>
        <n-form-item label="验证码" path="captcha" label-style="color: #7f8693;">
          <div class="login-form-captcha">
            <n-input v-model:value="loginFormData.captcha" maxlength="4" round placeholder="验证码">
              <template #prefix>
                <n-icon :component="Bot" />
              </template>
            </n-input>
            <img :src="captchaURL" title="验证码" alt="验证码" @click="refreshCatpcha" />
          </div>
        </n-form-item>
        <div class="login-form-rememberMe">
          <n-checkbox v-model:checked="loginFormData.rememberMe" label="记住我"></n-checkbox>
          <router-link class="reset-password" to="/resetPassword">忘记密码？</router-link>
        </div>
        <n-form-item >
          <n-button type="primary" attr-type="button" class="login-btn" round @click="handleLogin">立即登录</n-button>
        </n-form-item>
      </n-form>
    </div>
  </div>
</div>
</template>

<style lang="scss" scoped>
body{
  background: #ffffff;
}
.login-container{
  width: 900px;
  height: 500px;
  background: #ffffff;
  border-radius: var(--app-global-borderradius);
  box-shadow: 0 0 8px 0 rgba(22,50,137,0.06);
  overflow: hidden;
  display: flex;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translateX(-50%) translateY(-50%);
  .login-advert, .login-form{
    width: 50%;
    height: 100%;
  }
  .login-advert{
    background-color: #188fff;
    background-image: url("@/assets/images/login/login.gif");
    background-size: 80% auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    h1{
      color: #ffffff;
      font-size: 20px;
      margin: 30px;
    }
    p{
      color: #ffffff;
      margin: 30px;
      line-height: 25px;
    }
  }
  .login-form{
    h1{
      font-weight: normal;
      line-height: 80px;
      text-align: center;
      color: #0f1b2e;
    }
    .login-form-box{
      padding: 30px 50px;
      .login-form-captcha{
        width: 100%;
        display: flex;
        :deep(.n-input){
          width: calc(100% - 115px);
        }
        img{
          width: 100px;
          height: 34px;
          margin-left: 15px;
        }
      }
      .login-form-rememberMe{
        width: 100%;
        display: flex;
        justify-content: space-between;
        :deep(.n-checkbox__label){
          color: #7f8693;
        }
        .reset-password{
          color: #7f8693;
          text-decoration: none;
        }
      }
      .login-btn{
        width: 100%;
      }
    }
  }
}
</style>